<script setup>

import {ref, watch, onMounted} from 'vue'

const props = defineProps(['userNameListProps'])

const userNameList = ref([])
watch(props, (val) => {
  userNameList.value = val.userNameListProps
})

onMounted(() => {
  userNameList.value = props.userNameListProps
})

const ifAddName = ref(false)

const newUserName = ref('')

const yesAddName = () => {
  userNameList.value.push(newUserName.value)
  newUserName.value = ''
  ifAddName.value = false
}
const noAddName = () => {
  newUserName.value = ''
  ifAddName.value = false
}
</script>

<template>
  <div>
    <template v-if="!ifAddName">
      <el-button type="primary" @click="ifAddName = true">添加一个值班人</el-button>
    </template>
    <template v-else>
      <el-space size="default">
        <el-input style="width: 130px" type="text" v-model="newUserName"></el-input>
        <el-button type="primary" @click="yesAddName">确定</el-button>
        <el-button @click="noAddName">取消</el-button>
      </el-space>
    </template>
  </div>
</template>

<style scoped>

</style>